<template>
  <div class="wrap">
    <!-- 輪播圖 -->
    <div class="banner" v-if="bannerArrshou.length != 0">
      <el-carousel trigger="click" >
        <el-carousel-item v-for="(item,index) in bannerArrshou" :key="index">
          <img :src="item.backUrl" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>    
    <!-- 內容 -->
    <div class="good" @mouseout="removeActiveAll()">
      <!-- 每壹個item -->
      <div class="good_item" v-for="(item,index) in arr" :key='index' @mouseover="changeActive(index)" @mouseout="removeActive(index)">
          <!-- 商品圖片 -->
          <img :src="item.picUrl" alt=""  @click="gotodetail(item.id)">
          <!-- 商品內容 -->
          <div class="scroll_item_con">
            <!-- 標題 -->
            <div class="item_con_title">{{item.name}}</div>
            <!-- 簡介 -->
            <div class="item_con_text">
              <div>pv:{{item.pvValue}}</div>
              <!-- 購物數量 -->
              <div v-show="isHover == index?true:false">
                <el-input-number :max="item.number>0?item.number:1" size="mini" :min="1" :value="item.quannum" v-on:input="handleBlur" @change="handleChange( item )"></el-input-number>
              </div>
            </div>
            <!-- 價格 -->
            <div class="item_con_price">
              <div>${{item.counterPrice}}</div>
              <div>{{item.retailPrice}}</div>
            </div>
            <!-- 加入購物車按鈕 -->
            <div class="item_con_car" v-show="isHover == index?true:false">
            <svg t="1607987342685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1254" width="37" height="30"><path d="M900.48 843.52H268.8L106.88 88.96H32a32 32 0 0 1-32-32A31.36 31.36 0 0 1 32 25.6h128L320 780.16h580.48a32 32 0 0 1 0 64z" p-id="1255" fill="#ffffff"></path><path d="M904.32 698.88H272v-64h606.72L953.6 275.2H195.84v-64H992a32.64 32.64 0 0 1 24.96 12.16 31.36 31.36 0 0 1 6.4 26.24l-87.68 423.04a32 32 0 0 1-31.36 26.24z" p-id="1256" fill="#ffffff"></path><path d="M232.96 372.48h702.08v63.36H232.96z" p-id="1257" fill="#ffffff"></path><path d="M562.56 421.12h63.36v219.52h-63.36zM742.336 634.944l42.752-219.2 62.208 12.16-42.752 219.2zM340.736 427.136l62.208-12.096 42.56 219.328-62.208 12.032zM888.96 998.4a109.44 109.44 0 1 1 109.44-108.8 109.44 109.44 0 0 1-109.44 108.8z m0-154.88a46.08 46.08 0 1 0 46.08 46.08 46.08 46.08 0 0 0-46.08-46.08zM310.4 998.4a109.44 109.44 0 1 1 109.44-108.8 109.44 109.44 0 0 1-109.44 108.8z m0-154.88a46.08 46.08 0 1 0 46.08 46.08 46.08 46.08 0 0 0-46.08-46.08z" p-id="1258" fill="#ffffff"></path></svg>
              <div @click="addToCart(item)">加入購物車</div>
            </div>
          </div>
      </div>
    </div>
    <!-- 分頁 -->
    <div class="pagination-container" v-if="!isNoGood">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="limit" 
        :page-sizes='[8,16]' layout="total,sizes, prev, pager, next, jumper " :total="total">
      </el-pagination>
    </div>

    <div class="nogoodbox" v-if="isNoGood">
      <img src="@/assets/nogood.png" alt="">
      <div>暫無商品</div>
    </div>

  </div>
</template>

<script>
import {goodlist,getBanner,hotSellRecommend} from '@/api/index'
import {addItemsToCart} from '@/api/car'
import { getToken,removeToken,setToken } from '@/utils/auth' // 驗權
export default {
  name: 'classify',
  data () {
    return {
      bannerArrshou:[],
      arr:[],
      // arr:[{src:require('@/assets/good1.jpg'),name:'波士頓龍蝦1',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good.png'),name:'波士頓龍蝦2',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good2.jpg'),name:'波士頓龍蝦3',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good3.jpg'),name:'波士頓龍蝦4',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good4.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good5.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1}],
      input_number_value:1,
      isHover:-1,
      limit:8,//每頁顯示數
      page:1,//第幾頁
      total:0,//總數
      user_id:null,
      isNoGood:false
    }
  },
  mounted() {
    if(this.$route.query.isnew == 1){
      this.getnewdata()
    }else{
      this.getdata()
    }
    // this.getBannerTou()
    if(getToken()){
      this.user_id = getToken()
    }else{
      this.user_id = null
    }
  },
  methods:{
    // 對接數據
    getdata(){
      goodlist({limit:this.limit,page:this.page,categoryId:this.$route.query.classifyid}).then(response => {
        if(response.errno == 0){
          if(response.data.goodsList.length == 0){
            this.isNoGood = true
          }
          this.arr = response.data.goodsList
          for(var i = 0 ;i<this.arr.length;i++){
            this.arr[i].quannum = 1
          }
          this.total = response.data.total;
        }else{
          this.isNoGood = true
        }
        console.log(response)
      })
    },
    getnewdata(){
      hotSellRecommend({limit:this.limit,page:this.page,catoryId:this.$route.query.classifyid}).then(response => {
        if(response.errno == 0){
          if(response.data.goodsList.length == 0){
            this.isNoGood = true
          }
          this.arr = response.data.goodsList
          for(var i = 0 ;i<this.arr.length;i++){
            this.arr[i].quannum = 1
          }
          this.total = response.data.total;
        }else{
          this.isNoGood = true
        }
      })
    },
    // 首頁banner:0
    getBannerTou(){
      getBanner({id:this.$route.query.classifyid}).then(response => {
        if(response.errno == 0){
          this.bannerArrshou = response.data.list
        }
        console.log(response)
      })
    },
    addToCart(items){
      if(!getToken()){
        this.$router.push('login')
        return
          this.$confirm('您當前是遊客模式，是否確認購買', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(items.isOnSale){
          if(items.quannum > items.number){
            this.$message({
              type:'error',
              message:'加入失敗，該商品現有庫存為'+items.number
            })
          }else{
            var array = [items.id+'#'+items.quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              console.log(response)
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
                if(!getToken()){
                  setToken(response.data.userId)
                }
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
            }) 
          } 
      }else{
        this.$message({
          type:'error',
          message:'很抱歉該商品已下架'
        })
      }  
        }).catch(() => {        
        });
      }else{
          if(items.isOnSale){
          if(items.quannum > items.number){
            this.$message({
              type:'error',
              message:'加入失敗，該商品現有庫存為'+items.number
            })
          }else{
            var array = [items.id+'#'+items.quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              console.log(response)
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
                if(!getToken()){
                  setToken(response.data.userId)
                }
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
            }) 
          } 
      }else{
        this.$message({
          type:'error',
          message:'很抱歉該商品已下架'
        })
      }  
      }
      
         
    },
    handleSizeChange(val) {
      this.limit = val;
      if(this.$route.query.isnew == 1){
        this.getnewdata()
      }else{
        this.getdata()
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      if(this.$route.query.isnew == 1){
        this.getnewdata()
      }else{
        this.getdata()
      }
    },
    // 輸入購物數量
    handleBlur(value){
      this.input_number_value = value
    },
    // 計算購物數量
    handleChange( data ) {
      let re = /^[0-9]+$/
      // if (!re.test(this.input_number_value)) {
      //   this.$message.error('請輸入大於1的正整數！')
      //   this.$nextTick(() => {
      //     data.quannum = parseInt(this.input_number_value)
      //     // data.quannum = this.input_number_value;
      //   })
      // }
      data.quannum = parseInt(this.input_number_value)
    },
    // 鼠標移入
    changeActive(index){
      this.isHover = index
    },
    // 鼠標移出
    removeActive(index){
      this.isHover = index
    },
    // 鼠標移出所有
    removeActiveAll(){
      this.isHover = -1
    },
    gotodetail(index){
      this.$router.push({path:'/detail',query:{id:index}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap{
  width: 100%;
  box-sizing: border-box;
}
.banner>>>.el-carousel{
  width: 100%;
  height: 640px !important;
  overflow-x:none !important
}
.banner>>>.el-carousel__container{
  height: 640px !important;
}
.banner>>>.el-carousel__item img {
  width: 100%;
  height: 640px !important;
  object-fit: fill;
}
.banner>>>.el-carousel__item is-animating{
  width: 100%;
  height: 640px !important;
}
.banner>>>.el-carousel__button{
  width: 51px !important;
  height: 15px !important;
  border-radius: 8px;
}
.good{
  width: 70%;
  margin: 0px auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  /* margin: 20px 0px; */
}
.good_item{
  width: 25%;
  height: 350px;
  box-sizing: border-box;
  padding: 10px 20px;
  margin:20px 0px;
}
.good_item>img{
  width: 100%;
  /* height: auto; */
  height: 195px;
 
  object-fit: fill;
}
.scroll_item_con{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.item_con_title{
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.item_con_text{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.item_con_text>div:nth-child(1){
  font-size: 20px;
  font-weight: 400;
  color: #BE9A67;
  line-height: 36px;
  overflow: hidden;
  height: 36px;
  text-overflow:ellipsis;
  white-space: nowrap;  
}
.item_con_text>div:nth-child(2){
  display: flex;
  align-items: center;
}
.item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
  width: 100px;
}
.item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
  background: #fff;
}
.item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
  color: #101010;
}
.item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.item_con_price{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}
.item_con_price>div:nth-child(1){
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #FF1010;
}
.item_con_price>div:nth-child(2){
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
  margin-left: 20px;
}
.item_con_car{
  width: 100%;
  height: 50px;
  background: #BE9A67;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item_con_car>img{
  width: 37px;
  height: 30px;
}
.item_con_car>div{
  font-size: 20px;
  font-family: 59;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.pagination-container{
  width: 70%;
  box-sizing: border-box;
  margin: 100px auto;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: #BE9A67;
  color: white;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:hover{
  color: #BE9A67;
}
.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:focus{
  border-color: #BE9A67;
}
.nogoodbox{
  width: 100%;
  height: 500px;
  text-align: center;
}
.nogoodbox>img{
  width: 305px;
  height: 331px;
  margin: 0px auto;
}
.nogoodbox>div{
  height: 28px;
  font-size: 30px;
  font-weight: 500;
  color: #333333;
  line-height: 60px;
  opacity: 0.5;
}
</style>
